<template>
<div class='njybwarninfo'>
   <template v-if="isShowYjContain">
        <div class="currentYjInfoContain">
            <div class="backYjList" @click="isShowYjContain = false">< 点击返回</div>
            <div class="currentinfo">
                <div class="currentinfoLeft">
                    <nut-image :src="currentYj.src" width="60" height="50" />
                </div>
                <div class="currentinfoLeftText">
                    <span class="currentinfoLeftTextWarnName">{{currentYj.warn_name}}</span>
                    <span>{{currentYj.publish_unit}}</span>
                    <span>{{currentYj.publish_time}}</span>
                </div>
            </div>
            <div class="currentinfoTContent">{{currentYj.publish_content}}</div>
        </div>
   </template>
   <template v-else>
        <div class="njybwarninfo_tab">
            <span :class="[tabActive == 'nj'?'active':'']" @click="tabClick('nj')">{{projectConfig.citySingleName}}</span>
            <span v-if="projectConfig.isShowDsq == 1" :class="[tabActive == 'metroarea'?'active':'']" @click="tabClick('metroarea')">{{projectConfig.citySingleName}}都市圈</span>
            <span :class="[tabActive == 'js'?'active':'']" @click="tabClick('js')">江苏</span>
        </div>
        <div class="njybwarninfo_con">
            <div v-for="yj in allYjData" :class="['yjSingle']" @click="clickYjData(yj)">
                <div class="yjSingleLeft">
                    <div class="yjSingleLeftImg">
                        <nut-image :src="yj.srcSmall" width="40" height="35" />
                    </div>
                    <div class="yjSingleLeftText">
                        <span class="yjSingleLeftWarnName">{{yj.warn_name}}</span>
                        <span>{{yj.publish_unit}}</span>
                    </div>
                </div>
                <div class="yjSingleRight">
                    <span class="showDetail">查看详情 ></span>
                    <span>{{yj.publish_time}}</span>
                </div>
            </div>
        </div>
   </template>
   
</div>
</template>
<script  setup>
import njYjxh from "@/config/njYjxh.json";
import projectConfig from "@/config/projectConf.js";
import { findValidWarnByAppByAreaCode } from '@/api/ybWarnApi'
import {ref} from 'vue'
import {useRoute} from "vue-router";
const route = useRoute();
const identifier = ref("");
identifier.value = route.query.id;
// alert(JSON.stringify(route.query));
const currentYj = ref({})
const isShowYjContain =ref(false)
const tabActive = ref("nj")

const tabAreaCode = {
    "nj":projectConfig.yjxhAreaCode.noDsq,
    "metroarea":projectConfig.yjxhAreaCode.dsq,
    "js":"32"
}

const allYjData = ref([]);
//获得所有的预警信号
const getAllWarnInfo = ()=>{
    findValidWarnByAppByAreaCode(tabAreaCode[tabActive.value]).then(res=>{
        const {code,data} = res;
        if(code == 200 && data.length>0){
            data.filter(yj=>njYjxh[yj.warnCode]&&njYjxh[yj.warnCode][yj.warnLevel]).map(item=>{
				const yjxh = njYjxh[item.warnCode][item.warnLevel];
				item.warn_name = yjxh.name+"预警";
                item.srcSmall = new URL(`../assets/warnSignal/yjxhicon/${yjxh.url}`, import.meta.url).href
                item.src = new URL(`../assets/warnSignal/yjxhicon/${yjxh.urlBig}`, import.meta.url).href
			})
            allYjData.value = data;
            if(identifier.value){
                let index = allYjData.value.findIndex(yj=>yj.identifier == identifier.value);
                if(index !=-1){
                    clickYjData(allYjData.value[index]);
                }
            }
        }else{
            allYjData.value = [];
        }
    })
}
const tabClick = (tab)=>{
    if(tab != tabActive.value){
        tabActive.value = tab;
        getAllWarnInfo();
    }
   

}
const clickYjData = (yjItem)=>{
    isShowYjContain.value = true;
    currentYj.value = yjItem;
}
onMounted(()=>{
    getAllWarnInfo();
})

</script>
<style scoped>
.njybwarninfo{
    width: 100%;
    height: 100%;
    color:#000;
    font-size: 16px;
    background: #3b68dc;
    .currentYjInfoContain{
        width: calc(100% - 20px);
        padding:0px 10px;
        height: 100%;
        background: #fff;
        .backYjList{
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: left;
            font-size: 11px;
            color:rgba(51, 95, 209, 1);
            font-weight: bold;
        }
        .currentinfo{
            border-bottom: 1px solid gray;
            padding-bottom: 5px;
            margin-bottom: 5px;
            display: flex;
            justify-content: flex-start;
            .currentinfoLeft{
                padding-top: 5px;
                margin-right: 5px;
            }
            .currentinfoLeftText{
                font-size: 13px;
                span{
                    display: inline-block;
                    width: 100%;
                    height: 33%;
                }
            }
        }
        .currentinfoTContent{
            margin-top: 5px;
            font-size: 15px;
        }
    }
    .njybwarninfo_tab{
        height: 30px;
        line-height: 30px;
        display: flex;
        padding:0px 5px;
        color: #9ab1ea;
        >span{
            flex: 1;
            align-items: center;
            text-align: center;
            &.active{
                color: #fff;
                border-bottom: 2px solid #fff;
            }
        }
    }
    .njybwarninfo_con{
        background: #fff;
        height: calc(100% - 40px);
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-top: 5px;
        padding:10px 5px;
        .yjSingle{
            height: 30px;
            margin:5px 20px;
            border-bottom: 1px solid rgba(236, 236, 236, 1);
            display: flex;
            justify-content: space-between;
            .yjSingleLeft{
                font-size: 10px;
                flex: 1;
                display: flex;
                .yjSingleLeftImg{}
                .yjSingleLeftText{
                    margin-left: 5px;
                    span{
                        display: inline-block;
                        width: 100%;
                        height: 50%;
                    }
                    .yjSingleLeftWarnName{
                        color: #000;
                        font-size: 13px;
                    }
                }
            }
            .yjSingleRight{
                width: 100px;
                font-size: 10px;
                text-align: right;
                span{
                    display: inline-block;
                    width: 100%;
                    height: 50%;
                }
                .showDetail{
                    font-weight: bold;
                    color: rgba(51, 95, 209, 1);
                    
                }
            }
        }
    }
}
</style>